<template>
  <div class="ybl">
    <div class="ybl">
      <h3 style="margin: 20px;">项目管理</h3>
      <el-radio-group v-model="radio1" @change="pClick">
        <el-radio-button label="简介" />
        <el-radio-button label="详情" />
      </el-radio-group>
      <div class="x">
        <el-input placeholder="请输入物料号" v-model="uid" />
        <el-button v-text="'查找'" type="primary" size="mini" @click="ss" />
      </div>
      <div v-if="radio1=='详情'" class="ybl" style="padding:0px 10px;">
        <el-table
          height="100"
          :data="tabData2"
          border
          stripe
          highlight-current-row
          style="width: 100%;"
        >
          <el-table-column
            fixed
            type="index"
            label="行号"
            width="50"
            show-overflow-tooltip
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="item"
            label="id"
            width="80"
            show-overflow-tooltip
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="uid"
            label="物料号"
            width="180"
            show-overflow-tooltip
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="name"
            label="名称"
            width="180"
            show-overflow-tooltip
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="model"
            label="型号"
            width="180"
            show-overflow-tooltip
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="process"
            label="工序"
            width="180"
            show-overflow-tooltip
            header-align="center"
            align="center"
            :formatter="getProcess"
          />
          <el-table-column
            prop="sum"
            label="预计用量"
            width="100"
            show-overflow-tooltip
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="arrived"
            label="已到1"
            width="100"
            show-overflow-tooltip
            header-align="center"
            align="center"
          >
            <template slot-scope="scope">
              <div class="y jc zc wf w80px">
                <h2 v-text="scope.row.arrived+'/'+scope.row.sum" style="z-index:9;" />
                <el-progress
                  :text-inside="true"
                  :stroke-width="26"
                  :percentage="scope.row.sum?parseInt(scope.row.arrived>scope.row.sum?100:scope.row.arrived/scope.row.sum*100):0"
                  style="width:100%;"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="use"
            label="已用"
            width="100"
            show-overflow-tooltip
            header-align="center"
            align="center"
          >
            <template slot-scope="scope">
              <div class="y jc zc w80px">
                <h2 v-text="scope.row.use+'/'+scope.row.sum" style="z-index:9;" />
                <el-progress
                  :text-inside="true"
                  :stroke-width="26"
                  :percentage="scope.row.sum?parseInt(scope.row.use>scope.row.sum?100:scope.row.use/scope.row.sum*100):0"
                  style="width:100%;"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="stock"
            label="库存"
            width="100"
            show-overflow-tooltip
            header-align="center"
            align="center"
          >
            <template slot-scope="scope">
              <div class="y jc zc w80px">
                <h2 v-text="scope.row.stock+'/'+scope.row.sum" style="z-index:9;" />
                <el-progress
                  :text-inside="true"
                  :stroke-width="26"
                  :percentage="scope.row.sum?parseInt(scope.row.stock>scope.row.sum?100:scope.row.stock/scope.row.sum*100):0"
                  style="width:100%;"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="remarks" label="备注">
            <template slot-scope="scope">
              <el-input v-model="scope.row.remarks" />
            </template>
          </el-table-column>
        </el-table>
        <fy :value="tableData" @change="tabData2=$event" />
      </div>
      <div v-if="radio1=='简介'" class="ybl" style="padding:15px 10px 0px;">
        <div class="x za">
          <el-card>
            <div @click="pClick(1,statistic.i[0])" class="y jc">
              <h2 style="color:#409eff;" class>来齐率</h2>
              <el-progress :color="customColors" type="circle" :percentage="statistic.p[0]" />
            </div>
          </el-card>
          <el-card>
            <div @click="pClick(1,statistic.i[1])" class="y jc">
              <h2 style="color:#e6a23c;" class>未齐率</h2>
              <el-progress :color="customColors" type="circle" :percentage="statistic.p[1]" />
            </div>
          </el-card>
          <el-card>
            <div @click="pClick(1,statistic.i[2])" class="y jc">
              <h2 style="color:#f56c6c;" class>未到率</h2>
              <el-progress :color="customColors" type="circle" :percentage="statistic.p[2]" />
            </div>
          </el-card>
          <el-card>
            <div @click="pClick(1,statistic.i[3])" class="y jc">
              <h2 style="color:#67c23a;" class>出库率</h2>
              <el-progress :color="customColors" type="circle" :percentage="statistic.p[3]" />
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import fy from "./fy";
export default {
  components: { fy },
  props: ["statistic", "data"],
  watch: {
    data: {
      handler() {
        this.pClick("简介");
      }
    }
  },
  data() {
    return {
      radio1: "简介",
      customColors: [
        { color: "#f56c6c", percentage: 20 },
        { color: "#e6a23c", percentage: 40 },
        { color: "#5cb87a", percentage: 60 },
        { color: "#1989fa", percentage: 80 },
        { color: "#6f7ad3", percentage: 100 }
      ],
      tableData: [],
      tabData2: [],
      uid: "",
      is: []
    };
  },
  // computed() {return{}},
  created() {},
  methods: {
    pClick(a, b) {
      if (a === 1) {
        this.tableData = b;
        this.radio1 = "详情";
      } else {
        this.tableData = this.data;
        this.is = [];
        // this.radio1 = a;
        // console.log(this.$cp(this.tabData2), this.tableData);
      }
    },
    getProcess(a) {
      return this.$gd.process.getItem({ id: a.process }).name;
    },
    ss() {
      let items = this.is;
      if (!items.length) {
        this.is = this.$cp(this.tableData);
        items = this.tableData;
      }
      // console.log(this.$cp(items), this.$cp(this.is));
      this.tableData = this.findItem(items, this.uid);
      // this.tableData = items.findItem(this.uid);
    },
    findItem(list, uid) {
      let t = [];
      let i = {};
      list.map(a => {
        if (!a.uid) {
          i = this.$gd.items.getItem({ id: a.item });
          a.uid = i.uid;
          a.name = i.name;
          a.model = i.model;
        }
        // console.log(a.uid);
        if (a.uid.indexOf(uid) >= 0) {
          // console.log(a.uid);
          t.push(a);
        }
      });
      // console.log(t.length);
      return t;
    }
  }
};
</script>

<style lang="less" scoped>
</style>
